<template>
  <div class="login-page">
    <div class="title">瓜州人力资源服务数据平台</div>
    <div class="login-form">
      <div class="login-title">用户登录&nbsp;&nbsp;USER&nbsp;LOGIN</div>
      <div class="form-item">
        <img src="/static/username.png" class="icon"/>
        <input v-model="form.userName" class="form-ctrl" placeholder="请输入用户名" maxlength="11" />
      </div>
      <div class="form-item">
        <img src="/static/password.png" class="icon"/>
        <input v-model="form.password" class="form-ctrl" placeholder="请输入密码" maxlength="16" type="password" />
      </div>
      <div class="form-item code">
        <img src="/static/code.png" class="icon"/>
        <input v-model="form.code" class="form-ctrl" placeholder="请输入验证码" maxlength="4" />
        <img @click="resetCaptcha()" :src="captcha" title="点击刷新验证码" class="code-img" />
      </div>
      <div @click="handleLogin" class="btn">登录</div>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";
import {setToken} from "@/utils/auth";
import {login} from "@/api/login";

export default {
  data(){
    return{
      form:{
        userName:'',
        password:'',
        code:'',
      },
      captcha:'',
    }
  },
  mounted() {
    this.resetCaptcha();
  },
  methods:{
    resetCaptcha(){
      this.captcha=process.env.VUE_APP_BASE_API+'/kaptcha?'+Date.now()
    },
    handleLogin(){
      if(this.form.userName.trim().length===0){
        Message.error('请输入用户名')
        return
      }
      if(this.form.password.trim().length===0){
        Message.error('请输入密码')
        return
      }
      if(this.form.code.trim().length===0){
        Message.error('请输入验证码')
        return
      }
      const loading=this.$loading({text:'加载中',background:'rgba(0,0,0,.5)'})
      login(this.form).then((res)=>{
       if(res.data==null){
         Message.error(res.msg)
       }
       setToken(res.data.token)
        this.$router.push({name:'Statistics-9'});
      }).finally(()=>{
        loading.close()

      }).catch(()=>{
        this.resetCaptcha();
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-page{
  width: 100%;
  height: 100%;
  background: url("/static/login-bg.jpg") no-repeat center;
  background-size: auto 100%;
  overflow: hidden;
  .title{
    margin: 130px auto;
    font-size: 44px;
    color: #07a6ff;
    text-align: center;
  }
  .login-form{
    margin: 0 auto;
    background: url("/static/login-form.png") no-repeat center;
    width: 405px;
    height: 432px;
    background-size: 100% 100%;
    padding: 30px;
    .login-title{
      color: #07a6ff;
      font-size: 18px;
      border-left: 4px solid #07a6ff;
      padding-left: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    .form-item{
      display: flex;
      flex-direction: row;
      align-items: center;
      border-radius: 5px;
      border: 1px solid #0b4f82;
      margin-bottom: 30px;
      height: 45px;
      .icon{
        width: 45px;
        height: 100%;
        border: none;
        transform: scale(0.6);
      }
      .form-ctrl{
        height: 100%;
        width: calc(100% - 45px);
        display: flex;
        align-items: center;
        background: rgba(0,0,0,0);
        color: #fff;
        border: none;
      }
      .form-ctrl::-webkit-input-placeholder{
        color: #547394;
      }
      .form-ctrl:-moz-placeholder{
        color: #547394;
      }
      .form-ctrl::-moz-placeholder{
        color: #547394;
      }
      .form-ctrl:-ms-input-placeholder{
        color: #547394;
      }
    }
    .form-item.code{
      width: calc(100% - 110px);
      position: relative;
      .code-img{
        width: 100px;
        height: 100%;
        position: absolute;
        border: 1px solid #0b4f82;
        right: -110px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .btn{
      width: 100%;
      height: 45px;
      border-radius: 5px;
      background: #03b5f5;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
</style>
